<template>
  <div>
    <div class="f ac pb10">
      <div class="nowrap mr5 b">类型：</div>
      <div class="g1aada7 rds2 pl5 pr5 pt2 pb2" style="border:1px solid #1aada7;">日期</div>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">标题：</div>
      <Input :value="item.label" @on-change="e=>changeField(e, 'label')" />
    </div>
    <div class=" pt10 pb10">
      <div class="nowrap mr5 b">字段标识：</div>
      <Input :value="item.key" @on-change="e=>changeField(e, 'key')" />
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">标签宽度：</div>
      <Input :value="item.labelWidth" @on-change="e=>changeField(e, 'labelWidth')" v-int v-min="0" v-max="10000" />
      <!-- <InputNumber :min="50" :max="10000" :step="1" :value="item.labelWidth" style="width:100%;" @on-change="e=>changeField(e, 'labelWidth')"></InputNumber> -->
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">占位内容：</div>
      <Input :value="item.placeholder" @on-change="e=>changeField(e, 'placeholder')" />
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">操作属性：</div>
      <div class="f rw">
        <div @click="checkOperate(optItem)" v-for="optItem in operateList" :key="optItem.id" class="f ac mr30  poi">
          <div class="rds2 rel trans3 f ac xc mr5" :style="{width:'16px',height:'16px',background: optItem.isChecked ? '#1aada7' : '#fff', border: optItem.isChecked ? 'none' : '1px solid #dcdee2'}">
            <div v-show="optItem.isChecked" style="width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translate(0, -1px) rotate(-45deg);"></div>
          </div>
          {{optItem.name}}
        </div>
      </div>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">校验：</div>
      <div class="">
        <div v-for="optItem in checkList" :key="optItem.id" >
          <div @click="selectCheck(optItem)" class="f ac poi">
            <div class="rds2 rel trans3 f ac xc mr5" :style="{width:'16px',height:'16px',background: optItem.isChecked ? '#1aada7' : '#fff', border: optItem.isChecked ? 'none' : '1px solid #dcdee2'}">
              <div v-show="optItem.isChecked" style="width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translate(0, -1px) rotate(-45deg);"></div>
            </div>
            {{optItem.name}}
          </div>
          <div v-if="optItem.id == 2 && optItem.isChecked" class="mb5">
            <Input :value="item.regExp" @on-change="e=>changeField(e, 'regExp')" />
          </div>
          <div v-if="optItem.id == 3 && optItem.isChecked" class="mb5">
            <Input :value="item.validator" @on-change="e=>changeField(e, 'validator')" />
          </div>
        </div>
      </div>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">事件动作</div>
      <div class="">
        <div>onChange事件</div>
        <Input type="textarea" :autosize="{ minRows: 4 }" class="" :value="item.onChange" @on-change="e=>changeField(e, 'onChange')" />
      </div>
      <!-- <div class="">
        <div>onFocus事件</div>
        <Input class="" :value="item.onFocus" @on-change="e=>changeField(e, 'onFocus')" />
      </div>
      <div class="">
        <div>onBlur事件</div>
        <Input class="" :value="item.onBlur" @on-change="e=>changeField(e, 'onBlur')" />
      </div> -->
    </div>
  </div>
</template>
<script src='./index.js'></script>
<style src='./index.css' scoped>
</style>